<template>
	<view class="define-tabbar">
		<view class="tabbar flex justify-between">
			<view class="item flex justify-center align-center"
				v-for="(item, index) in tabbar" :key="index">
				<view v-if="!item.isOther" class="content text-center"
					:class="{
						active: activePage == item.pagePath
					}"
					@click="toPage(item)"
				>{{item.text}}</view>
				<view @click="toPage(item)"
					v-else  class="content2 text-center">
					+
				</view>
			</view>
		</view>
		<view class="blank"></view>
	</view>
</template>

<script>
	import {
		prePage
	} from "@/common/libs/login.js";
	
	export default {
		name:"define-tabbar",
		data() {
			return {
				tabbar: [
					{
						pagePath:'/pages/index/index',
						text:'首页'
					},
					{
						pagePath:'/pages/editor/index',
						text:'写作',
						isOther: true,
						needAuth: true
					},
					{
						pagePath:'/pages/user/info/index',
						text:'我的'
					}
				],
				activePage: ""
			};
		},
		mounted() {
			// 判断当前页面
			// #ifdef APP-PLUS
			const page = prePage();
			// #endif
			// #ifdef H5
			const page = "/" + prePage();
			// #endif
			this.activePage = page;
		},
		methods: {
			// 跳转页面
			toPage(value) {
				// 因为重复点击会重复进入，为了避免这个问题，直接做一个判断
				if(this.activePage != value.pagePath) 
					this.$go(value.pagePath, {}, 'navigateTo', {noAuth: !value.needAuth});
			}
		}
	}
</script>

<style lang="scss" scoped>
.define-tabbar{
	.tabbar{
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 80rpx;
		// line-height: 80rpx;
		background-color: white;
		z-index: 9999;
		box-shadow: -1rpx -1rpx 5rpx rgba(#000, .1);
		.item{
			width: 250rpx;
			.content, .content2{
				cursor: pointer;
			}
			.content2{
				width: 80rpx;
				background-color: red;
				height: 60rpx;
				line-height: 50rpx;
				color: white;
				font-size: 50rpx;
				font-weight: bold;
				border-radius: 15rpx;
			}
			.active{
				font-size: 33rpx;
				font-weight: bold;
			}
		}
	}
	.blank{
		width: 100%;
		height: 80rpx;
		position: relative;
		bottom: 0;
	}
}
</style>